export const FunnelPlot2 = () => {
    return `

    

    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  const data = [
                    {value: 20, name: 'name1'
                
                    },
                    {value: 40, name: 'name2'},
                    {value: 60, name: 'name3'},
                    {value: 80, name: 'name4'},
                    {value: 100, name: 'name5'}
                ]
  const state = reactive({
    option:  {

       color:["rgba(3, 28, 255, 1)","rgba(3, 72, 255, 1)","rgba(3, 129, 255, 1)","rgba(3, 171, 255, 1)"
    ,"rgba(3, 221, 255, 1)"],
        "legend": {
           show:false
        },
        "grid": {
            "top": "24%",
            left:"10"
        },
        series: [
            {
        name: "",
        type: "funnel",
           min: 0,
         max: 100,
         sort: 'ascending', //金字塔形:'ascending', 漏斗图形:'descending'
         type: 'funnel',
         left: '15%',
         top: 40,
           width: '30%',
        label: {
          formatter: function(params) {
            console.log(params);
            return (
              "{a| " +
              params.name +
              "} {b| " +
              params.value +
              "个 (" +
              params.percent +
              "%)}"
            );
          },
          rich: {
            a: {
              color: "rgba(211, 228, 254, 1)",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            },
            b: {
              color: "rgba(0, 205, 222, 1)",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            },
          },
          emphasis: {
            position: "left",
            formatter: "{c}%",
          },
        },
        labelLine: {
          normal: {
            length: 200,
            position: "left",

            lineStyle: {
              width: 1,
            },
          },
        },
        itemStyle: {
          opacity: 1,
          borderWidth: 0,
          shadowBlur: 5,
          shadowOffsetX: 0,
          shadowOffsetY: 2,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
   data:data
      },
      {
        data,
        name: "",
        type: "funnel",
        top: 0,
        gap: 10,
        label: {
          normal: {
            position: "inside",
            formatter: "转化率：({c}%)",
            textStyle: {
              color: "#fff",
            },
          },
        },
        labelLine: {
          normal: {},
        },
        itemStyle: {
          normal: {
            color: "transparent",
            borderWidth: 0,
            opacity: 0,
          },
        },
      
      },
        ]
    }
    
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
    
    
    `;
  };
  